<template>

  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="handleUpdate()"
        size="mini">
        添加
      </el-button>
    </el-card>
    <el-table ref="productAttrTable"
              :data="list"
              style="width: 100%"
              border>
      <el-table-column type="selection" width="60" align="center"></el-table-column>

      <el-table-column label="属性编号" width="100" prop="attrId" align="center">
      </el-table-column>
      <el-table-column label="属性名称" width="100" prop="attrName" align="center">
      </el-table-column>

      <el-table-column label="设置" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="getParamList(scope.$index, scope.row)">参数列表
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="属性类型" width="100" :formatter="updateAttrType" prop="attrType" align="center">
      </el-table-column>
      <el-table-column label="创建时间" width="100" :formatter="dateFormatter" prop="attrCreateTime" align="center">
      </el-table-column>
      <el-table-column label="创建人" width="100" prop="createAdminName" align="center">
      </el-table-column>
      <el-table-column label="更新人" width="100" prop="updateAdminName" align="center">
      </el-table-column>
      <el-table-column label="更新时间" width="100" :formatter="dateFormatter" prop="updateTime" align="center">
      </el-table-column>
      <el-table-column label="是否启用" width="200" prop="attrStatus" align="center">
        <template slot-scope="scope">
          <p>
            <el-radio-group v-model="scope.row.attrStatus" @change="handleDelete(scope.$index, scope.row)">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleUpdate(scope.$index, scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="productAttrCatForm":model="attrForm" :rules="rules" label-width="120px">
        <el-form-item label="属性编号" prop="attrId" v-show="false">
          <el-input v-model="attrForm.attrId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="属性名称" prop="attrName">
          <el-input v-model="attrForm.attrName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="属性类型" prop="attrType">
        <el-radio-group v-model="radio">
          <el-radio :label="0">销售属性</el-radio>
          <el-radio :label="1">非销售属性</el-radio>
        </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm(attrForm)">确 定</el-button>
      </span>
    </el-dialog>


  </div>

</template>

<script>
  import moment from 'moment'
    export default {
        name: "spuAttrList",
        data(){
          return{
            list:[],
            attrStatus:true,
            dialogTitle:"",
            dialogVisible:false,
            radio: 1,
            attrStatus:true,
            attrForm:{
              attrId:'',
              attrName:'',
            },
            rules: {
              attrName: [
                { required: true, message: '请输入类型名称', trigger: 'blur' }
              ]
            }
          }
        },
      created() {
        console.log("*********")
        this.getList();
      },
      methods: {
          handleConfirm(attrForm){
            console.log(attrForm,this.radio)
            if(this.dialogTitle=="添加"){
              this.$axios({
                method: 'post',
                url: 'http://localhost:8101/spuAttr/add',
                params: {
                  attrName:attrForm.attrName,
                  attrType:this.radio,
                  kindsId:this.$route.query.kindsId,
                  createBy:1,
                  updateBy:1
                }
              }).then(result=>{
                this.dialogVisible=false;
                this.getList();
              })
            }else if(this.dialogTitle=="编辑"){
              this.$axios({
                method: 'post',
                url: 'http://localhost:8101/spuAttr/amend',
                params: {
                  attrId:attrForm.attrId,
                  attrName:attrForm.attrName,
                  attrType:this.radio,
                  updateBy:1
                }
              }).then(result=>{
                this.dialogVisible=false;
                this.getList();
              })
            }
          },
          updateAttrType(row, column){
            var attr = row[column.property];
            if(attr == 0){
              return '销售属性'
            }else{
              return "非销售属性"
            };
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
          },
        dateFormatter(row, column){
          var date = row[column.property];
          if(date == undefined){return ''};
          return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        getParamList(index, row) {
          this.$router.push({path:'/attr/value/spuAttrValueList',query:{attrId:row.attrId}})
        },
        getList() {
            this.$axios.get("http://localhost:8101/spuAttr/getById/"+this.$route.query.kindsId,).then(result=>{
              console.log(result)
              this.list=result.data;
            })
        },
        /*删除*/
        handleDelete(index, row){
          var attrStatus=row.attrStatus==1?1:0;
          console.log(attrStatus)
          this.$axios({
            method: 'post',
            url: 'http://localhost:8101/spuAttr/del',
            params: {
              attrId:row.attrId,
              attrStatus:attrStatus,
              updateBy:1
            }
          }).then(result=>{
            this.getList();
          })
        },
        /*编辑*/
        handleUpdate(index,row){
          this.dialogVisible=true;
          if(row==undefined||row==''){
            this.dialogTitle="添加";
            this.attrForm.attrId='';
            this.attrForm.attrName='';
            this.radio=1;
          }else{
            this.dialogTitle="编辑";
            this.attrForm.attrId=row.attrId;
            this.attrForm.attrName=row.attrName;
            this.radio=row.attrStatus
          }
        }

      }
    }
</script>

<style scoped>

</style>
